<template>
  <div class="page login">
    <div class="top lg">
      <span @click="$router.back()">
        <svg-icon icon-class="close" class="icon" />
      </span>
      <span>忘记密码</span>
      <svg-icon icon-class="more" class="icon" />
    </div>
    <img class="logo" src="../../assets/images/logo.png" />
    <div class="form">
      <van-field v-model="form.phone" clearable placeholder="请输入手机号">
        <img
          class="l-icon small"
          slot="left-icon"
          src="../../assets/icon/mobile.png"
        />
      </van-field>
      <van-field v-model="form.code" clearable placeholder="请输入验证码">
        <img
          class="l-icon small"
          slot="left-icon"
          src="../../assets/icon/code.png"
        />
        <van-button
          v-if="!isSend"
          class="code"
          slot="button"
          size="small"
          @click="sendCode"
        >
          {{ codeText }}
        </van-button>
        <van-button v-else class="code" slot="button" size="small">
          {{ clock }} s
        </van-button>
      </van-field>
      <van-field
        v-model="form.pwd"
        clearable
        type="password"
        placeholder="请输入密码"
      >
        <img
          class="l-icon"
          slot="left-icon"
          src="../../assets/icon/password.png"
        />
      </van-field>
      <van-field
        v-model="form.repwd"
        clearable
        type="password"
        placeholder="请再次输入密码"
      >
        <img
          class="l-icon"
          slot="left-icon"
          src="../../assets/icon/password.png"
        />
      </van-field>
    </div>
    <div class="big-btn" @click="submit">确 定</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: null,
        code: null,
        pwd: null,
        repwd: null
      },
      isSend: false,
      codeText: "获取验证码",
      clock: 60
    };
  },
  methods: {
    sendCode() {
      if (this.isSend) return;
      this.isSend = true;
      let timer = setInterval(() => {
        if (this.clock < 1) {
          this.clock = 60;
          this.isSend = false;
          this.codeText = "重新获取验证码";
          clearInterval(timer);
        } else {
          this.clock--;
        }
      }, 1000);
    },
    submit() {
      if (this.verify()) {
        this.$toast.success("注册成功");
        this.$router.push({ name: "login" });
      }
    },
    verify() {
      if (!this.form.phone) {
        this.$toast.fail("请输入账号");
        return false;
      } else if (!this.form.code) {
        this.$toast.fail("请输入验证码");
        return false;
      } else if (!this.form.pwd) {
        this.$toast.fail("请输入密码");
        return false;
      } else if (!this.form.repwd) {
        this.$toast.fail("请输入确认密码");
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>
